<!DOCTYPE html>
<html>

<head>
    <title>天眼管理系统</title>
    <link rel="icon" href="{{ url_for('static', filename='img/1.png') }}" type="image/x-icon">
    <style>
        /* 设置页面主体样式 */
        body {
            /* 去除默认边距 */
            margin: 0;
            /* 设置字体 */
            font-family: Arial, sans-serif;
            /* 使用弹性布局 */
            display: flex;
            /* 弹性布局方向为垂直方向 */
            /* flex-direction: column; */
            /* 最小高度为视口高度 */
            min-height: 100vh;
        }

        /* 设置主容器样式 */
        .main-container {
            /* 使用弹性布局 */
            display: flex;
            /* 弹性增长系数为1，占据剩余空间 */
            flex: 1;
        }

        /* 设置侧边栏样式 */

        .sidebar {
            /* 侧边栏宽度 */
            /* width: 200px;  */
            /* 侧边栏背景颜色 */
            background-color: #2c3e50;
            /* 侧边栏内边距 */
            padding: 20px;
        }

        /* 设置侧边栏链接样式 */
        .menu-header {
            cursor: pointer;
            padding: 12px 16px;
            color: white;
            font-weight: 600;
            font-size: 14px;
            border-radius: 6px;
            transition: all 0.3s ease;
            background: linear-gradient(145deg, #34495e, #2c3e50);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 8px;
        }

        .menu-header:hover {
            background: linear-gradient(145deg, #3b4f63, #34495e);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .submenu {
            display: none;
            padding-left: 24px;
            margin-top: 8px;
        }

        .submenu a {
            display: block;
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            padding: 10px 16px;
            margin-bottom: 6px;
            border-radius: 4px;
            transition: all 0.3s ease;
            background-color: rgba(255,255,255,0.05);
        }

        .submenu a:hover {
            background-color: rgba(255,255,255,0.1);
            transform: translateX(4px);
        }

        .menu-item.active .submenu {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(-10px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* 设置侧边栏链接悬停样式 */
        .sidebar a:hover {
            /* 悬停时背景颜色 */
            background-color: #34495e;
        }

        .main-content {
            /* 使用弹性布局 */
            display: flex;
            /* 弹性增长系数为1，占据剩余空间 */
            flex: 1;
            /* 弹性布局方向为垂直方向 */
            flex-direction: column;
        }

        /* 设置顶部导航栏样式 */
        .topbar {
            background-color: #ffffff;
            padding: 16px 24px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
        }

        .topbar h1 {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f0f2f5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 14px;
        }

        .username {
            font-size: 14px;
            color: #666;
        }


        /* 设置内容区域样式 */
        .content {
            /* 弹性增长系数为1，占据剩余空间 */
            flex: 1;
            /* 去除内边距 */
            padding: 0;
            /* 内容区域高度为视口高度减去顶栏高度 */
            height: calc(100vh - 60px);
            /* 当内容溢出时显示滚动条 */
            overflow: hidden;
        }

        /* 设置iframe样式 */
        iframe {
            /* iframe宽度为100% */
            width: 100%;
            /* iframe高度为100% */
            height: 100%;
            /* 去除iframe边框 */
            border: none;
            /* 确保iframe完全填充父容器 */
            display: block;
        }
    </style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    const headerTitle = document.getElementById('header-title');
    const sidebar = document.querySelector('.sidebar');

    headerTitle.addEventListener('click', function() {
        if (sidebar.style.display === 'none') {
            sidebar.style.display = 'block';
        } else {
            sidebar.style.display = 'none';
        }
    });
        const iframe = document.getElementById('main-content');
        const links = document.querySelectorAll('.submenu a');
        const menuHeaders = document.querySelectorAll('.menu-header');

        // 处理子菜单链接点击
        links.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                iframe.src = this.href;
            });
        });

        // 处理菜单项点击
        menuHeaders.forEach(header => {
            header.addEventListener('click', function() {
                const menuItem = this.parentElement;
                menuItem.classList.toggle('active');
            });
        });
    });
</script>
</head>

<body>
    <div class="main-container">
        <div class="sidebar">
            <div class="menu-item">
                <div class="menu-header">天眼报表</div>
                <div class="submenu">
                    <a href="{{ url_for('view_feidang') }}" src='{{ url_for('view_feidang') }}'>线别分档展示</a>
                    <a href="{{ url_for('view_ClassStatistics') }}" src='{{ url_for('view_ClassStatistics') }}'>开班对切</a>
                    <a href="{{ url_for('view_danshua') }}" src='{{ url_for('view_danshua') }}'>效率单刷</a>
                    <a href="{{ url_for('view_showefficiency') }}" src='{{ url_for('view_showefficiency') }}'>平均效率展示</a>
                     <a href="{{ url_for('view_proportioneta') }}" src='{{ url_for('view_proportioneta') }}'>车间数据汇总</a>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-header">学习提升</div>
                <div class="submenu">
                    <a href="{{ url_for('view_duiqiemoni') }}" src='{{ url_for('view_duiqiemoni') }}'>对切模拟</a>
                    <a href="{{ url_for('view_books') }}" src='{{ url_for('view_books') }}'>计量笔记</a>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-header">天眼预警</div>
            </div>
            <div class="menu-item">
                <div class="menu-header">天眼设置</div>
                <div class="submenu">
                    <a href="{{ url_for('config_ipconfig') }}" src='{{ url_for('config_ipconfig') }}'>IP设置</a>
                    <a href="{{ url_for('config_daily_stats') }}" src='{{ url_for('config_daily_stats') }}'>每日数据统计</a>
                    <a href="{{ url_for('config_tableconfig') }}" src='{{ url_for('config_tableconfig') }}'>变量设置</a>
                </div>
            </div>
        </div>
        <div class="main-content">
            <div class="topbar">
                <h1 id="header-title">天眼系统0.0.0.9</h1>
                <div class="user-info">
                    {% if 'logged_in' in session %}<span class="username">观察者欢迎您！{{ session['username'] }}</span><a href="{{ url_for('logout') }}" class="btn btn-danger btn-sm ms-3">登出</a>{% else %}<a href="{{ url_for('user_login') }}" class="btn btn-primary btn-sm">登录</a>{% endif %}
                </div>
            </div>
            <div class="content">
                <iframe id="main-content" src="{{ url_for('config_ipconfig') }}"></iframe>
            </div>
        </div>

</body>

</html>